<template>
  <div>
    <div class="card" style="margin-bottom: 10px;">
      <el-input  style="width: 260px; margin-right: 10px;" v-model="data.employee_name" placeholder="请输入员工名称查询" :prefix-icon="Search"/>
      <el-button type="primary" style="margin-left:10px;" @click="Searchload">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 10px;">
      <div>
      <el-button type="primary" @click="handleAdd">新增员工</el-button>
      </div>

      <!-- 客户信息显示 -->
      <div>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column prop="employee_name" label="员工姓名" />
          <el-table-column prop="department" label="部门"/>
          <el-table-column prop="position" label="职位" />
          <el-table-column prop="employee_phone" label="电话" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)" plain>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 新增员工框 -->
      <el-dialog width="35%" v-model="data.addVisible" title="添加员工">
      <el-form :model="data.addform" label-width="100px" label-position="right" style="padding-right: 40px">
        <el-form-item label="员工姓名">
          <el-input v-model="data.addform.employee_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="data.addform.employee_status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="data.addform.employee_department" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="data.addform.employee_position" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="data.addform.employee_phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="data.addform.user_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="data.addform.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.addVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsave">保 存</el-button>
        </span>
      </template>
      </el-dialog>

      <!-- 编辑框 -->
      <el-dialog width="35%" v-model="data.editVisible" title="修改员工信息">
      <el-form :model="data.editform" label-width="100px" label-position="right" style="padding-right: 40px">
        <el-form-item label="密码">
          <el-input v-model="data.editform.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="data.editform.employee_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="data.editform.employee_status" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="data.editform.employee_department" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="data.editform.employee_position" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="data.editform.employee_phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="data.editform.user_name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSave">编辑</el-button>
        </span>
      </template>
      </el-dialog>
    </div>
  </div>


</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"

const store=useStore()

const data=reactive({
  employee_name:'',
  tableData:[],

  addform:{},
  addVisible:false,

  editform:{},
  editVisible:false
})

const load=()=>{
  axios.get('http://localhost:8088/GET/EmployeeInfo').then(res=>{
    data.tableData=res.data.data.EmployeeInfoList
    for(let i=0;i<data.tableData.length;i++){
     //通过状态值判断状态
     if(data.tableData[i].employee_department==0){
        data.tableData[i].department="老板"
      }else if(data.tableData[i].employee_department==1){
        data.tableData[i].department="模型"
      }else if(data.tableData[i].employee_department==2){
        data.tableData[i].department="渲染"
      }else if(data.tableData[i].employee_department==3){
        data.tableData[i].department="后期"
      }else if(data.tableData[i].employee_department==4){
        data.tableData[i].department="前台"
      }

      if(data.tableData[i].employee_position==0){
        data.tableData[i].position="老板"
      }else if(data.tableData[i].employee_position==1){
        data.tableData[i].position="模型主管"
      }else if(data.tableData[i].employee_position==2){
        data.tableData[i].position="渲染主管"
      }else if(data.tableData[i].employee_position==3){
        data.tableData[i].position="后期主管"
      }else if(data.tableData[i].employee_position==4){
        data.tableData[i].position="模型员工"
      }else if(data.tableData[i].employee_position==5){
        data.tableData[i].position="渲染员工"
      }else if(data.tableData[i].employee_position==6){
        data.tableData[i].position="后期员工"
      }else if(data.tableData[i].employee_position==7){
        data.tableData[i].position="前台"
      }
  }
  console.log(data.tableData)
  })

}
load()

//查询
const Searchload=()=>{
  const formdata = new FormData();
  formdata.append('customer_name',data.employee_name);
  axios.get('http://localhost:8088/GET/EmployeeInfoByName',{
    params:{
      name:data.employee_name
    }
  }).then(res=>{
    console.log(res)
    data.tableData=res.data.data.EmployeeInfoList
  })
}

//重置
const reset=()=>{
  load()
}

//新增客户
const handleAdd=()=>{
  data.addform={}
  data.addVisible=true
}

const addsave=()=>{
  axios.post('http://localhost:8088/POST/CreateEmployeeInfo',data.addform).then(res=>{
    if(res.data.success){
      ElMessage.success("添加成功")
      console.log(res)
      load()
      data.addVisible=false
    }else{
      ElMessage.error("添加失败")
    }
  })
}

// //编辑
const handleEdit=(row)=>{
  data.editform=JSON.parse(JSON.stringify(row))
  data.editVisible=true
}

const editSave=()=>{
  axios.post('http://localhost:8088/POST/ChangeEmployeeInfo',data.editform).then(res=>{
    console.log(res)
    if(res.data.success){
      ElMessage.success("修改成功")
      load()
      data.editVisible=false
    }else{
      ElMessage.error("修改失败")
    }
  })
}


</script>